var mychartjiangshui = echarts.init(document.getElementById('jiangshui'));
var option = {
    title: {
      text: 'Rainfall vs Evaporation',
      subtext: 'Fake Data'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Rainfall']
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        axisLine:{
              lineStyle:{//改变xy轴线条的颜色
                  color:"#FFF",
                  width:1//这里是为了突出显示加上的
              }
          },
          axisLabel:{
              textStyle:{//改变xy轴上文字的颜色
                  color:"#FFF"
              }
          },
        type: 'category',
        // prettier-ignore
        data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
      }
    ],
    yAxis: [
      {
        axisLine:{
              lineStyle:{//改变xy轴线条的颜色
                  color:"#FFF",
                  width:1//这里是为了突出显示加上的
              }
          },
          axisLabel:{
              textStyle:{//改变xy轴上文字的颜色
                  color:"#FFF"
              }
          },
        type: 'value',
        axisLabel:{formatter:'{value}%'},
      }
    ],
    series: [
      {
        name: 'Rainfall',
        type: 'bar',
        data: [
          54,2,2,13,72,69,55,55,2,19,48,12,34,9,2,6,42,46,84,47,28,40,68,62,100,90,93,93,83,90
        ],
        itemStyle: {
              color:"#98c1ff"
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
    ]
  };
mychartjiangshui.setOption(option);
var mychartwendu = echarts.init(document.getElementById('wendu'));
var option1 = {
    title: {
      
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {textStyle:{color:"white"}},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
        axisLine:{
            lineStyle:{//改变xy轴线条的颜色
                color:"#FFF",
                width:1//这里是为了突出显示加上的
            }
        },
        axisLabel:{
            textStyle:{//改变xy轴上文字的颜色
                color:"#FFF"
            }
        },
      type: 'category',
      boundaryGap: false,
      data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
    },
    yAxis: {axisLine:{
        lineStyle:{//改变xy轴线条的颜色
            color:"#FFF",
            width:1//这里是为了突出显示加上的
        }
    },
    axisLabel:{
        textStyle:{//改变xy轴上文字的颜色
            color:"#FFF"
        }
    },
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: 'Highest',
        type: 'line',
        data: [31,34,30,29,30,27,28,32,34,36,32,31,27,31,33,31,29,29,30,30,31,31,29,30,27,28,28,28,28,29],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        },
        lineStyle: {
            color:"rgb(252,162,162)"
        },
      },
      {
        name: 'Lowest',
        type: 'line',
        data: [22,22,22,22,20,20,22,23,23,24,23,22,20,21,23,23,22,24,24,24,24,24,23,24,23,24,24,24,24,25],
        lineStyle: {
            color:"rgb(149,231,243)"
        },
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              }
            ]
          ]
        }
      }
    ]
  };
mychartwendu.setOption(option1)